<template>
  <el-container>

    <el-header height=10% style="margin: 0;padding: 0;height: 59px">
      <blank-top-menu></blank-top-menu>
    </el-header>

    <el-main class="main">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>找回密码</span>
          </div>
        </template>

        <el-form
            label-width="100px"
            label-position="left"
            size="small"
            inline="inline"
            :rules="dataRule"
            ref="formdata"
            :model="formObj"
        >
          <el-row justify="center">
            <el-form-item label="账户" prop="userName">
              <el-input v-model="formObj.userName"/>
            </el-form-item>
          </el-row>
          <el-row justify="center">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formObj.email"/>
            </el-form-item>
          </el-row>
          <el-row justify="space-evenly">
            <el-col :span="6" style="margin-left: 12px">
              <el-form-item label="验证码" prop="captcha"></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-input v-model="formObj.captcha"/>
            </el-col>
            <el-col :span="6">
              <!--              <el-button class="but" @click="sendCaptcha">获取验证码</el-button>-->
              <div>
                <el-button v-show="showSend" @click="sendCaptcha" >获取验证码</el-button>
                <span v-show="!showSend" class="count">{{secLeft}} s</span>
              </div>
            </el-col>
          </el-row>
          <el-row justify="center">
            <el-popconfirm title="确认取消吗?" @confirm="go2login" >
              <template #reference>
                <el-button >取消</el-button>
              </template>
            </el-popconfirm>
            <el-button @click="go2ChangePassword" class="but" >下一步</el-button>
          </el-row>
        </el-form>

      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import BlankTopMenu from "@/components/blank-top-menu";
import {ref} from 'vue'
import axios from 'axios'
import {ElMessage} from "element-plus";

let centerDialogVisible = ref(false)// eslint-disable-line no-unused-vars
export default {
  name: "register-frame",
  components: {BlankTopMenu},
  data() {
    return {
      formObj: {
        userName: '',
        email: '',
        captcha: '',
      },
      showSend:true,
      secLeft:60
    }
  },
  setup() {
    let centerDialogVisible = ref(false)

    let dataRule =  {
      userName:[
        {required:true , message :"请输入用户名",trigger:"blur"},
      ],
      email: [
        { required: true, message: "请输入邮箱", trigger: "blur" },
      ],
      captcha:[
        { required: true, message: "请输入验证码", trigger: "blur" },
      ]
    }

    return {
      centerDialogVisible,
      dataRule
    }
  },
  methods: {
    go2ChangePassword: function () {
      if (this.formObj.captcha === '') {
        this.$message.error('请输入收到的验证码!!')
      } else {
        let params = new URLSearchParams()
        params.append("username", this.formObj.userName)
        params.append("emailAddress", this.formObj.email)
        params.append("captcha", this.formObj.captcha)
        axios.post('http://120.48.51.66:8081/user/forgetPassword', params).then((response) => {
          if (response.data.code === 200) {
            sessionStorage.setItem('username', response.data.data.username)
            this.$router.push('/changePassword')
          } else {
            this.$message.error(response.data.message)
          }
        }).catch((e)=>{
          console.log(e)
        })
      }
    },
    go2login:function (){
      this.$router.push("/login")
    },
    sendCaptcha: function () {
      if (this.formObj.userName === '' || this.formObj.email === '') {
        this.$message.error('请填写所有信息')
      } else {
        this.showSend = false
        let timer = setInterval(()=>{
          this.secLeft --
          if(this.secLeft == 0 ){
            this.showSend = true
            this.secLeft = 60
            clearInterval(timer)
          }
        },1000)
        let params = new URLSearchParams()
        params.append("emailAddress", this.formObj.email)
        params.append('username',this.formObj.userName)
        axios.post('http://120.48.51.66:8081/user/passwordCaptcha', params).then(function (response) {
          if (response.data.code === 200) {
            ElMessage({
              message: '发送成功',
              type: 'success'
            })
          } else if(response.data.code==8000){
            ElMessage({
              message: '用户不存在',
              type: 'error'
            })
          } else if(response.data.code == 6000){
            ElMessage({
              message: '请使用注册时的邮箱',
              type: 'error'
            })
          }
        }).catch((e) => {
          console.log(e)
        })
      }
    }
  }

}

</script>

<style scoped>
html,
body,
.main {
  background: url("@/assets/background.jpg") no-repeat left top;
  background-size: 100% 100%;
}

#nextStep {
  margin-left: 150px;
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 400px;
  margin-left: 60%;
  margin-top: 11%;
  border-radius: 22px;
  height: 280px;
}

.but {
  background-color: #4C8ADA;
  color: white;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
